<template>
    <div>
        <div class="content">
            <vxe-form :data="formData" :items="formItems" titleColon> </vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane label="className" name="className">
                    <monaco-editor v-model="formData.className" :height="tableHeight" language="javascript" />
                </el-tab-pane>
                <el-tab-pane label="项列表" name="formItem">
                    <vxe-grid ref="xGrid" v-bind="gridOptions" @checkbox-change="handleSelectionChange" @edit-actived="editActivedEvent" :data="formData.items">
                        <template #toolbar_buttons>
                            <el-row :gutter="10">
                                <el-col :span="1.5">
                                    <el-button type="info" plain icon="Plus" @click="handleAdd">新增</el-button>
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
                                </el-col>
                            </el-row>
                        </template>
                        <template #slotsField="{ row }">
                            <vxe-input v-model="row.field" :disabled="disabledField"></vxe-input>
                        </template>
                    </vxe-grid>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, getCurrentInstance } from "vue";
    import { VxeGridInstance, VxeGridProps, VxeGridEvents, GridMethods, TableMethods, TableEditMethods, TableValidatorMethods } from "../../../../../types/all";
    import { gridComponentMethodKeys } from "@/components/ElementRender/src/methods";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import useBaseApi from "@/api/base/index";
    import EditorPopupModal from "@/components/EditorPopupModal/index.vue";
    import XEUtils from "xe-utils";
    import { formConfigDataDefault } from "./propsDefault";
    import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
    const { proxy } = getCurrentInstance() as any;
    const { callRemoves } = useBaseApi("/tableConfig/tableFormItem");
    const tableHeight = ref(document.documentElement.scrollHeight - 480 + "px");
    const xGrid = ref({} as VxeGridInstance);
    const activeName = ref("formItem");
    const multiple = ref(true);
    const props = defineProps({
        formData: {
            type: Object,
            default: formConfigDataDefault,
        },
    });

    const dictOptions = ref<any>([]);
    /** 查询字典下拉列表 */
    const dictData = await getDictOptionselect();
    dictOptions.value = dictData.data;

    const formItems = reactive([
        { field: "span", title: "栅格占据的列数", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入", type: "number", max: 24, min: 1 } } },
        {
            field: "align",
            title: "内容对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "size",
            title: "尺寸",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "", label: "" },
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "titleAlign",
            title: "标题对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        { field: "titleWidth", title: "标题宽度", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入标题宽度" } } },
        {
            field: "titleColon",
            title: "是否显示标题冒号",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "titleAsterisk",
            title: "是否显示必填字段的红色星号",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "titleOverflow",
            title: "标题内容过长时显示",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "ellipsis", label: "显示省略号" },
                    { value: "title", label: "显示为原生 title" },
                    { value: "tooltip", label: "显示tooltip提示" },
                ],
                props: { placeholder: "请选择对齐方式" },
            },
        },
        {
            field: "collapseStatus",
            title: "v-model绑定值,折叠状态",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "customLayout",
            title: "是否使用自定义布局",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "preventSubmit",
            title: "是否禁用默认的回车提交方式",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "enabled",
            title: "是否启用",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        { field: "remark", title: "备注", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        // { field: "className", title: "表单附加 className", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);

    const gridOptions = reactive<VxeGridProps>({
        border: true,
        resizable: true,
        showHeaderOverflow: true,
        showOverflow: true,
        highlightHoverRow: true,
        keepSource: true,
        id: "17",
        height: tableHeight,
        sortConfig: {
            trigger: "cell",
            remote: true,
        },
        filterConfig: {
            remote: true,
        },
        pagerConfig: {
            pageSize: 10,
            pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
            perfect: true,
            enabled: false,
        },
        toolbarConfig: {
            refresh: true,
            zoom: true,
            custom: true,
            slots: {
                buttons: "toolbar_buttons",
            },
        },
        columns: [
            {
                type: "checkbox",
                width: 50,
                fixed: "left",
            },
            {
                field: "itemId",
                title: "序号",
                width: 80,
                fixed: "left",
            },
            {
                field: "sortNo",
                title: "排序",
                width: 100,
                editRender: {
                    name: "input",
                    props: {
                        type: "number",
                    },
                    attrs: { placeholder: "请输入" },
                },
            },
            {
                field: "field",
                title: "字段",
                width: 140,
                editRender: { enabled: true },
                slots: { edit: "slotsField" },
                fixed: "left",
            },
            {
                field: "title",
                title: "字段名",
                width: 140,
                editRender: {
                    name: "input",
                    attrs: { placeholder: "请输入字段名" },
                },
                fixed: "left",
            },
            {
                field: "span",
                title: "栅格占据的列数",
                width: 140,
                editRender: {
                    name: "input",
                    props: {
                        type: "number",
                        min: 0,
                        max: 24,
                    },
                    attrs: { placeholder: "请输入" },
                },
            },
            {
                field: "align",
                title: "内容对齐方式",
                width: 130,
                editRender: {
                    name: "select",
                    options: [
                        {
                            value: "left",
                            label: "左对齐",
                        },
                        {
                            value: "center",
                            label: "居中对齐",
                        },
                        {
                            value: "right",
                            label: "右对齐",
                        },
                    ],
                },
            },
            {
                field: "titleAlign",
                title: "标题对齐方式",
                width: 130,
                editRender: {
                    name: "select",
                    options: [
                        {
                            value: "left",
                            label: "左对齐",
                        },
                        {
                            value: "center",
                            label: "居中对齐",
                        },
                        {
                            value: "right",
                            label: "右对齐",
                        },
                    ],
                },
            },
            {
                field: "titleWidth",
                title: "标题宽度",
                width: 120,
                titlePrefix: { message: "类型(number)" },
                editRender: { name: "input", attrs: { placeholder: "请输入标题宽度" } },
            },
            {
                field: "titleColon",
                title: "是否显示标题冒号",
                width: 155,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "titleAsterisk",
                title: "是否显示必填字段的红色星号",
                width: 225,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "titleOverflow",
                title: "标题内容过长时显示",
                width: 170,
                editRender: {
                    name: "select",
                    options: [
                        {
                            value: "",
                            label: "",
                        },
                        {
                            value: "ellipsis",
                            label: "显示省略号",
                        },
                        {
                            value: "title",
                            label: "显示为原生title",
                        },
                        {
                            value: "tooltip",
                            label: "显示tooltip提示",
                        },
                    ],
                },
            },
            {
                field: "visible",
                title: "默认是否显示",
                width: 130,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "showTitle",
                title: "是否显示标题",
                width: 155,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "className",
                title: "表单项附加className",
                width: 200,
                titlePrefix: { message: "fnuction" },
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "表单项附加className" } },
            },
            {
                field: "contentClassName",
                title: "给表单项内容附加className",
                width: 220,
                titlePrefix: { message: "fnuction" },
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "给表单项内容附加 className" } },
            },
            {
                field: "contentStyle",
                title: "给表单项内容附加样式",
                width: 200,
                titlePrefix: { message: "fnuction" },
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "给表单项内容附加样式" } },
            },
            {
                field: "itemRender",
                title: "项渲染器配置项",
                width: 200,
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "项渲染器配置项", language: "json" } },
            },
            {
                field: "dictType",
                title: "字典类型",
                width: 140,
                editRender: {
                    name: "$select",
                    options: dictOptions.value,
                    optionProps: { value: "dictType", label: "dictDescribe" },
                    props: {
                        filterable: true,
                        clearable: true,
                        multiple: true,
                    },
                },
            },
            {
                field: "children",
                title: "项集合",
                width: 200,
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "项集合", language: "json" } },
            },
            {
                field: "slots",
                title: "插槽",
                width: 200,
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "插槽", language: "json" } },
            },
            {
                field: "visibleMethod",
                title: "是否显示",
                width: 120,
                titlePrefix: { message: "({ data }) => boolean" },
                editRender: { name: "MonacoEditor", attrs: { placeholder: "请输入" }, props: { title: "是否显示" } },
            },
            {
                field: "folding",
                title: "默认收起",
                width: 100,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "collapseNode",
                title: "折叠节点",
                width: 100,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "searchNo",
                title: "查询排序",
                width: 100,
                editRender: {
                    name: "$input",
                    props: {
                        type: "number",
                    },
                    attrs: { placeholder: "请输入排序" },
                },
            },
            {
                field: "formFilter",
                title: "是否显示删除按钮",
                width: 150,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "searchVisible",
                title: "是否是查询项",
                width: 120,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "searchFixed",
                title: "是否为固定查询",
                width: 120,
                cellRender: {
                    name: "$switch",
                    props: {
                        openValue: true,
                        closeValue: false,
                    },
                },
            },
            {
                field: "resetValue",
                title: "重置时的默认值",
                width: 140,
                editRender: { name: "input", attrs: { placeholder: "请输入默认值" } },
            },
            {
                field: "remark",
                title: "备注",
                width: 120,
                editRender: { name: "input", attrs: { placeholder: "请输入备注" } },
            },
        ],
        editConfig: {
            trigger: "click",
            mode: "row",
            showStatus: true,
        },
        editRules: {
            field: [{ required: true, message: "字段必须填写" }],
        },
    });
    const disabledField = ref(false);
    const editActivedEvent: VxeGridEvents.EditDisabled = ({ row }) => {
        disabledField.value = null != row["field"];
    };
    /** 多选框选中数据 */
    function handleSelectionChange(data: any) {
        multiple.value = !data.records.length;
    }
    /**新增 */
    function handleAdd() {
        xGrid.value.commitProxy("insert").then(({ row }: any) => {
            row["itemId"] = null;
            row["titleColon"] = 1;
            row["visible"] = 1;
            row["titleAsterisk"] = 1;
            row["collapseNode"] = 0;
            row["folding"] = 0;
            xGrid.value.setEditRow(row);
        });
    }
    /**删除 */
    async function handleDelete() {
        const { rows } = await xGrid.value.removeCheckboxRow();
        console.log("删除", rows);
        const deleteIds = ref([]);
        XEUtils.arrayEach(rows, (item: any) => {
            if (item["itemId"]) {
                deleteIds.value.push(item["itemId"]);
            }
        });
        if (deleteIds.value.length > 0) {
            callRemoves(deleteIds.value.join(","));
        }
    }

    function getFormData() {
        const items = xGrid.value.getTableData().tableData;
        return {
            ...props.formData,
            items,
        };
    }
    function getFormItemData() {
        console.log("表单项", xGrid.value.getTableData().tableData);
        return xGrid.value.getTableData().tableData;
    }

    const extendTableMethods = (methodKeys: any) => {
        const funcs: any = {};
        methodKeys.forEach((name: any) => {
            funcs[name] = (...args: any[]) => {
                const $vxegrid: any = xGrid.value;
                if ($vxegrid && $vxegrid[name]) {
                    return $vxegrid[name](...args);
                }
            };
        });
        return funcs;
    };

    const gridExtendTableMethods = extendTableMethods(gridComponentMethodKeys) as GridMethods & TableMethods & TableEditMethods & TableValidatorMethods;
    defineExpose({
        ...gridExtendTableMethods,
        getFormData,
        getFormItemData,
    });
</script>
<style scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
</style>
